<template>
	<view class="container">
		<navigationBar custom>
			<view class="top">
				<view class="top-left" @click="onOpenFilter">
					<view class="top-left-box">
						<view class="top-left-box-icon">
							<image src="/@/static/images/shaixuan.png"></image>
						</view>
						<view class="top-left-box-text">筛选</view>
					</view>
					<!--          <dropdown :arrowColor="3" :list="dropdownList">-->
					<!--            <view class="top-left-box">-->
					<!--              <view class="top-left-box-icon">-->
					<!--                <image src="/@/static/images/shaixuan.png"></image>-->
					<!--              </view>-->
					<!--              <view class="top-left-box-text">{{ dropdownName }}</view>-->
					<!--            </view>-->
					<!--          </dropdown>-->
				</view>
				<view class="top-right">
					<view class="top-right-icon">
						<image v-if="createReport" src="/@/static/images/shengchengbaogao.png"></image>
						<image v-else src="/@/static/images/shengchengbaogao-jinyong.png"></image>
					</view>
					<view class="top-right-text" :style="{color:createReport?'#2F6BFF':'#C9CACC'}"
						@click="onOpenReport">
						生成报告
					</view>
				</view>
			</view>
		</navigationBar>

		<view class="list">
			<view class="list-item" v-for="item in list" :key="item.id">
				<view class="list-item-left">
					<view class="list-item-left-radio"></view>
					<view class="list-item-left-main">
						<view class="list-item-left-main-img">
							<image src="/@/static/images/logo.png"></image>
							<!-- // <image :src="item.picturePath"></image> -->

						</view>
						<view class="list-item-left-main-main">
							<view class="list-item-left-main-main-top" :class="`list-item-left-main-main-top1`">
								{{ item.typeName }}
							</view>
							<view class="list-item-left-main-main-bottom">{{ item.createTime }}</view>
						</view>
					</view>
				</view>
				<view class="list-item-right" @click="onOpenDetail(item)">
					<view class="list-item-right-text">查看详情</view>
					<view class="list-item-right-icon">
						<image src="/@/static/images/chakanxiangqing.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!--  筛选  -->
		<Modal showClose showTitleBorder cancelText="重置" v-if="filterVisible" :visible="filterVisible" title="巡检信息筛选"
			@iconClose="onIconClose" @close="onResetFilter" @confirm="onConfirmModal">
			<view class="modal-form">
				<view class="modal-form-item">
					<Date :value="filterData.startTime" @change="onChangeStart" label-position="top" label="时间范围"
						placeholder="开始时间"></Date>
				</view>
				<view class="modal-form-item">
					<Date :value="filterData.endTime" @change="onChangeEnd" placeholder="结束时间"></Date>
				</view>
				<view class="modal-form-item">
					<Select label-position="top" @change="onChangeProblem" :list="problemTypeList" label="问题类别"
						:value="filterData.typeName"></Select>
				</view>
				<!-- 	<view class="modal-form-item">
					<Select label-position="top" @change="onChangeIdentification" :list="identificationTypeList"
						label="识别车辆" :value="filterData.identificationType"></Select>
				</view> -->
			</view>
		</Modal>


		<!--  巡检详情  -->
		<Modal showClose :showFooter="false" v-if="detailVisible" :visible="detailVisible" title="巡检详情"
			@iconClose="onCloseDetail">
			<view class="detail-modal">
				<view class="detail-modal-img">
					<image src="/@/static/images/logo.png"></image>
				</view>
				<view class="detail-modal-list">
					<view class="detail-modal-list-item">
						<view class="detail-modal-list-item-label">问题类别</view>
						<view class="detail-modal-list-item-sign detail-modal-list-item-sign1">{{singleItem.typeName}}
						</view>
					</view>
					<view class="detail-modal-list-item">
						<view class="detail-modal-list-item-label">发现问题</view>
						<view class="detail-modal-list-item-value">{{singleItem.createTime}}</view>
					</view>
					<view class="detail-modal-list-item">
						<view class="detail-modal-list-item-label">发现车辆</view>
						<view class="detail-modal-list-item-value">{{singleItem.robotName}}</view>
					</view>
				</view>
			</view>
		</Modal>

		<!--  报告设置  -->
		<Modal showClose showTitleBorder v-if="settingVisible" :visible="settingVisible" title="报告设置"
			@iconClose="onCloseReport" @close="onCloseReport" @confirm="onConfirmReport">
			<view class="setting-form">
				<view class="setting-form-item">
					<Input v-model:value="settingData.value1" placeholder="请输入" label="电站名称"></Input>
				</view>
				<view class="setting-form-item">
					<Input v-model:value="settingData.value2" placeholder="请输入" label="电站地址"></Input>
				</view>
				<view class="setting-form-item">
					<Input v-model:value="settingData.value3" placeholder="请输入" label="组件信息"></Input>
				</view>
				<view class="setting-form-item">
					<Date :value="settingData.value4" @change="onChangeReportDate" label="报告日期" placeholder="请选择">
					</Date>
				</view>
				<view class="setting-form-item">
					<Select @change="onChangeClimate" :list="climateTypeList" label="气候条件"
						:value="settingData.value5"></Select>
				</view>
				<view class="setting-form-item">
					<Input v-model:value="settingData.value6" placeholder="请输入" label="环境温度"></Input>
				</view>
				<view class="setting-form-item">
					<Select @change="onChangeLight" :list="lightTypeList" label="数据采集"
						:value="settingData.value7"></Select>
				</view>
			</view>
		</Modal>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue';
	import logo from "/@/static/images/logo.png"
	import Date from "/@/components/form/date/date.vue";
	import {
		showMessage,
		getLocalStorage
	} from "/@/utils/util";

	import {
		STORAGE_KEY
	} from "/@/config/constant";
	import {
		inspectApi
	} from "/@/api/login";
	// labelType:1：#F8AC30 2：#57C22D  3：#2DC2A2 4：#F22635
	let list = ref([])

	const problemTypeList = [{
			label: '灰尘',
			value: '灰尘'
		},
		{
			label: '裂痕',
			value: '裂痕'
		},
		{
			label: '短路',
			value: '短路'
		},
		{
			label: '鸟粪',
			value: '鸟粪'
		},
		{
			label: '树叶',
			value: '树叶'
		},
		{
			label: '组件碎裂',
			value: '组件碎裂'
		},
	]

	const identificationTypeList = [{
			label: '全部车辆',
			value: 'all'
		},
		{
			label: '部分车辆',
			value: 'part'
		},
	]

	const climateTypeList = [{
			label: '晴',
			value: '晴'
		},
		{
			label: '多云',
			value: '多云'
		},
		{
			label: '阴',
			value: '阴'
		},
		{
			label: '雨',
			value: '雨'
		},
	]

	const lightTypeList = [{
			label: '可见光',
			value: '可见光'
		},
		{
			label: '红外',
			value: '红外'
		},
		{
			label: '可见光+红外',
			value: '可见光+红外'
		},
	]

	const filterData = ref({
		startTime: '',
		endTime: '',
		typeName: '',
		identificationType: ''
	})

	let detailData = ref({
		startTime: '',
		pic: '',
		typeName: '',
		identificationType: ''
	})

	const settingData = ref({
		value1: '1',
		value2: '2',
		value3: '',
		value4: '',
		value5: '',
		value6: '',
		value7: '',
		reban: 0,
		zujian: 0,
		yiwu: 0,
		niaofen: 0,
		sum: 0
	})

	let singleItem = ref({})

	const createReport = ref(true)
	const filterVisible = ref(false)
	const detailVisible = ref(false)
	const settingVisible = ref(false)
	let userinfo = ref({
		userName: "某某"
	})

	onLoad(() => {
		userinfo = JSON.parse(getLocalStorage(STORAGE_KEY.userInfo));
		let reqData = {
			userId: userinfo.userid
		}
		reqInspectData(reqData);

		// onOpenReport();
	})

	const reqInspectData = (reqData) => {
		inspectApi(reqData).then(res => {
			if (res && res.data) {
				console.log('巡检清单为', res.data);
				list.value = res.data;
				calcSum(list.value);
			} else {
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
		});
	}

	const calcSum = (dataList) => {
		for (let item of dataList) {
			if (item.typeName == '热斑') {
				settingData.value.reban += 1;
			} else if (item.typeName == '鸟粪') {
				settingData.value.niaofen += 1;
			} else if (item.typeName == '异物') {
				settingData.value.yiwu += 1;
			} else if (item.typeName == '组件碎裂') {
				settingData.value.zujian += 1;
			}
		}
		settingData.value.sum = settingData.value.reban + settingData.value.niaofen + settingData.value.yiwu +
			settingData.value.zujian;
	}

	// async function generateWordFromTemplate(templateUrl, data) {
	// 	try {
	// 		// 1. 获取模板文件
	// 		const response = await fetch(templateUrl);
	// 		const templateData = await response.arrayBuffer();

	// 		// 2. 加载模板
	// 		const azip = new JSZip();
	// 		const zip = await azip.loadAsync(templateData);

	// 		// 3. 获取并修改文档内容
	// 		let content = await zip.file('word/document.xml').async('text');

	// 		// 替换模板中的占位符
	// 		for (const key in data) {
	// 			const placeholder = `{{${key}}}`;
	// 			content = content.replace(new RegExp(placeholder, 'g'), data[key]);
	// 		}

	// 		// 4. 更新ZIP中的内容
	// 		zip.file('word/document.xml', content);

	// 		// 5. 生成新的Word文档
	// 		const newDoc = await zip.generateAsync({
	// 			type: 'blob'
	// 		});

	// 		// 6. 下载文档
	// 		saveAs(newDoc, 'generated-document.docx');

	// 		return true;
	// 	} catch (error) {
	// 		console.error('生成Word文档失败:', error);
	// 		return false;
	// 	}
	// }

	// async function generateDocument() {
	// 	// 假设你的模板文件放在static/templates目录下
	// 	const templateUrl = '/static/template.docx';

	// 	await generateWordFromTemplate(templateUrl, settingData.value);
	// }

	const onConfirmReport = () => {
		console.log(settingData.value);

		// generateDocument();
		showMessage('报告生成成功');

		onCloseReport();
	}

	const onChangeLight = (e) => {
		settingData.value.value7 = e.value
	}

	const onChangeClimate = (e) => {
		settingData.value.value5 = e.value
	}

	const onChangeReportDate = (e) => {
		settingData.value.value4 = e
	}

	const onCloseReport = () => {
		settingVisible.value = false
		settingData.value = {
			value1: '',
			value2: '',
			value3: '',
			value4: '',
			value5: '',
			value6: '',
			value7: '',
			reban: 0,
			zujian: 0,
			yiwu: 0,
			niaofen: 0,
			sum: 0
		}
	}

	const onOpenReport = () => {
		settingVisible.value = true
	}

	const onCloseDetail = () => {
		detailVisible.value = false
	}

	const onOpenDetail = (item) => {
		console.log(item)
		singleItem = item;
		detailVisible.value = true
	}

	const onOpenFilter = () => {
		filterVisible.value = true
	}

	const onIconClose = () => {
		filterVisible.value = false
	}

	const onChangeStart = (e) => {
		filterData.value.startTime = e
	}

	const onChangeEnd = (e) => {
		filterData.value.endTime = e
	}

	const onChangeProblem = (e) => {
		filterData.value.typeName = e.value
	}

	const onChangeIdentification = (e) => {
		filterData.value.identificationType = e.value
	}

	const onResetFilter = () => {
		filterData.value = {
			startTime: '',
			endTime: '',
			typeName: '',
			identificationType: ''
		}
	}

	const onConfirmModal = () => {
		console.log(filterData.value)
		showMessage('筛选成功')
		filterVisible.value = false

		userinfo = JSON.parse(getLocalStorage(STORAGE_KEY.userInfo));
		let reqData = {
			userId: userinfo.userid,
			startTime: filterData.value.startTime ?? +':00',
			endTime: filterData.value.endTime ?? +':00',
			typeName: filterData.value.typeName
		}
		reqInspectData(reqData);
	}
</script>

<style lang="scss" scoped>
	@import "inspection";
</style>